<template>
  <!-- 地区第一人 -->
  <Top-Page class="regional-first-wrap">
    <cu-custom bgColor="bg-gradual-white-3" :isBack="true">
      <template #content>地区第一人</template>
    </cu-custom>

    <!-- <Field label="姓名" placeholder="填写您的姓名" v-model.trim="user_name" /> -->

    <!--   <Field
      label="联系方式"
      placeholder="填写您的联系方式"
      v-model.trim="phone"
    /> -->

    <Cell label="地区第一人">
      <view class="cell-right">
        <picker
          mode="selector"
          :range="regionData"
          range-key="name"
          @change="pickerChange(0, $event)"
        >
          <view class="">{{ address[0]?.name ?? "省" }}</view>
        </picker>

        <picker
          mode="selector"
          :range="regionData[address[0]?.index]?.child"
          range-key="name"
          @change="pickerChange(1, $event)"
        >
          <view class="">{{ address[1]?.name ?? "市" }}</view>
        </picker>

        <picker
          mode="selector"
          :range="
            regionData[address[0]?.index]?.child[address[1]?.index]?.child
          "
          range-key="name"
          @change="pickerChange(2, $event)"
        >
          <view class="">{{ address[2]?.name ?? "区/县" }}</view>
        </picker>
      </view>
    </Cell>

    <view class="explain">
      <view class="title">说明</view>
      <view class="explain-content">
        <view class="">1.只能申请身份证地址所在的区域；</view>
        <view class="">2.省、市、区/县任选其一即可申请。</view>
      </view>
    </view>

    <view class="apply-for" @click="applyFor">申请</view>
  </Top-Page>
</template>

<script lang="ts" setup>
import { ref, Ref, reactive } from "vue";
import Field from "@/components/Field/Field.vue";
import Cell from "@/components/Cell/Cell.vue";
import { onShow } from "@dcloudio/uni-app";
import regionData from "@/static/region.json";
import { isName, isMobile } from "@/utils/regular.js";
import minorityApi from "@/api/minority.js";

import pinia from "@/store/index";
import { useloginStore } from "@/store/login";
const loginStore = useloginStore(pinia);

const user_name = ref("");
const phone: Ref<number | null> = ref(null);
const address: { name: string; id: number; index: number }[] = reactive([]);
const userInfo = JSON.parse(JSON.stringify(loginStore.userInfo));

const applyFor = () => {
  // if (!user_name.value || !isName.test(user_name.value)) {
  //   uni.showToast({
  //     title: `请${!user_name.value ? "先" : "正确"}填写您的姓名`,
  //     icon: "none",
  //   });
  //   return;
  // }

  // if (!phone.value || !isMobile.test(String(phone.value))) {
  //   uni.showToast({
  //     title: `请${!phone.value ? "先" : "正确"}填写您的联系方式`,
  //     icon: "none",
  //   });
  //   return;
  // }

  if (!address.length) {
    uni.showToast({
      title: "请先选择您要申请的区域",
      icon: "none",
    });
    return;
  }

  if (!userInfo.user_name || !userInfo.identity || !userInfo.identity_address) {
    uni.showToast({
      title: "请先完成实名认证",
      icon: "none",
    });
    return;
  }

  const ads = address.map((item) => item.name ?? "").join("");
  if (userInfo.identity_address.indexOf(ads) === -1) {
    uni.showToast({
      title: "只能申请实名地的第一人\n省、市、区可任选其一",
      icon: "none",
    });
    return;
  }

  uni.showToast({
    title: "申请中...",
    icon: "none",
    mask: true,
    duration: 999999,
  });

  minorityApi
    .titleapply({
      province: address[0].name,
      city: address[1]?.name ?? "",
      area: address[2]?.name ?? "",
    })
    .then((res) => {
      uni.hideToast();

      uni.showToast({
        title: `${res.msg}`,
        icon: "none",
      });

      res.code === 0 && uni.navigateBack();
    });
};

const pickerChange = (index: number, e: any) => {
  const value = e.detail.value;

  if (index != 0) {
    const i = index - 1 < 0 ? 0 : index - 1;
    if (!address[i]?.name) {
      uni.showToast({
        title: `请先选择${i === 0 ? "省" : "市"}`,
        icon: "none",
      });
      return;
    }
  }

  if (index === 0) {
    address.length = 0;
  }

  if (index === 1) {
    address[2] = {};
  }

  if (index === 0) {
    address[index] = {
      name: regionData[value].name,
      id: regionData[value].id,
      index: value,
    };
  }

  if (index === 1) {
    address[1] = {
      name: regionData[address[0].index].child[value].name,
      id: regionData[address[0].index].child[value].id,
      index: value,
    };
  }

  if (index === 2) {
    address[2] = {
      name:
        regionData[address[0].index].child[address[1].index].child[value]
          .name ?? "",
      id:
        regionData[address[0].index].child[address[1].index].child[value].id ??
        "",
      index: value,
    };
  }
};
</script>

<style lang="scss">
.regional-first-wrap {
  :deep(.field-box) {
    .field-label {
      flex: inherit;
    }
  }

  :deep(.cell) {
    .cell-left {
      flex: inherit;
    }
  }

  .cell-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  .apply-for {
    position: fixed;
    bottom: 100rpx;
    width: 80%;
    left: 10%;
    padding: 16rpx;
    background-color: var(--subject_color);
    color: #fff;
    text-align: center;
    border-radius: 8rpx;
    font-size: 34rpx;
  }

  .explain {
    padding: 20rpx;

    .title {
      font-size: 30rpx;
    }

    .explain-content {
      color: #666;
      font-size: 28rpx;
    }
  }
}
</style>
